// @use '../../styles/themes.scss';
// 全局
// @import "../../styles/themes.scss";
// 引入公共
@import "_testFun.scss";


$sassLearn-color: #64ff00;
$if-type: red;


.testSass {
  color: $sassLearn-color;
  border: {
    style: solid;
    width: 2px;
    color: $sassLearn-color;
  };
}

:export {
  sassLearnColor: $sassLearn-color;
}

// 使用混合
.submit_button {
  @include button;
  margin-top: 5px;
  border: 1px solid skyblue;
}
// 动态传入
.submit_fun_button {
  @include button_fun($color: red, $width: 350px)
}
// 根据不同判断
.bg_color {
  @include bg_color()
}

// 循环 遍历 @each in
$eachColorList: (
  "pic": #E92D48, 
  "video": #2B23AE, 
  "ppt": #EA492C,
  "dimensions": #2254F4,
  "photography": #00B26B,
  "h5": #4F07B4,
  "gif": #161A25,
  "text": #00B791
);
$eachBackColorList: (
  "pic": rgba(233, 45, 72, 0.1), 
  "video": rgba(43, 35, 174, 0.1), 
  "ppt": rgba(234, 73, 44, 0.1),
  "dimensions": rgba(34, 84, 244, 0.1),
  "photography": rgba(0, 178, 107, 0.1),
  "h5": rgba(79, 7, 180, 0.1),
  "gif": rgba(55, 67, 100, 0.1),
  "text": rgba(0, 183, 145, 0.1)
);
.style_pic {
  font-size: 14px;
  color: gray;
}
@each $key, $color in $eachColorList {
  .style_#{$key} {
    font-size: 32px;
    color: $color;
    background-color: map-get($map: $eachBackColorList, $key: $key);
    border: 1px solid var(--#{$key});
  }
  .style_chil_#{$key} {
    // color: ;
    // @include set_style_fun($key, .7)
    @include set_style_fun($color, .7)
  }
}

